<template>
	<view class="mobile-write-offs">
		<!-- <nav-bar title="移动核销" :color="navBarColor" :bg="navBarBg" /> -->
		<con-venues :itemChooselist='itemChooselist' :venuelist='venuelist' @confirm="confirm1"></con-venues>
		<view class="" style="position: fixed;z-index: 999;width: 100%;top: 130rpx;background-color: #fff;">
			<view class="section_2">
				<van-row>
					<van-col :span="8">
						<view class="box flex-center flex-column" @click="offslist(1)">
							<!-- <navigator url="/page_admin/mobile-write-offs/write-offs-list/write-offs-list?add=1"
								class="box flex-center flex-column"> -->
							<view class="value">{{total1}}</view>
							<view class="label">今日核销</view>
							<!-- </navigator> -->
						</view>
					</van-col>
					<van-col :span="8">
						<view class="box flex-center flex-column" @click="offslist(2)">
							<!-- <navigator url="/page_admin/mobile-write-offs/write-offs-list/write-offs-list?add=1"
								class="box flex-center flex-column"> -->
							<view class="value">{{total2}}</view>
							<view class="label">我的今日核销</view>
							<!-- </navigator> -->
						</view>
					</van-col>
					<van-col :span="8">
						<view class="box flex-center flex-column" @click="offslist(3)">
							<view class="value">{{total3}}</view>
							<view class="label">历史核销</view>
						</view>
					</van-col>
				</van-row>
			</view>

			<view class="section_3">
				<van-row>
					<van-col :span="12">
						<view class="box box1 flex-center" @click="scanCode">
							<van-image width="74rpx" height="74rpx"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250737327604611.png" />
							<view class="name">扫码刷卡</view>
						</view>
					</van-col>
					<van-col :span="12">
						<!-- <navigator url="/page_admin/mobile-write-offs/retrieval-write-offs/retrieval-write-offs"
							class="box box2 flex-center"> -->
						<view class="box box2 flex-center" @click="retrievallist">
							<van-image width="74rpx" height="74rpx"
								src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250747037715598.png" />
							<view class="name">检索核销</view>
						</view>
						<!-- </navigator> -->
					</van-col>
				</van-row>
			</view>

			<view class="section_4">
				<!-- <van-image width="100%" height="80rpx"
					src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250736010467427.png" /> -->
				<text>检索核销仅支持手机号/卡号检索,如有疑问，请咨询技术人员。</text>
			</view>

		</view>
		<view class="list" style="margin-top: 320rpx;">
			<view class="title flex-align">今日记录</view>
			<view class="record-list pb-20" style="margin-top: 20rpx;">
				<view v-for="(record, index) in passlist" :key="index" class="record-card  mb-4 ">
					<view class="card-content p-4">
				
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
								<view class="">
									<text>{{ record.created_at  || '' }}</text>
								</view>
							</view>
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view>{{ record.billing_item_name || ''  }}</view>
							</view>
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view>{{ record.founder || ''  }}/{{ record.channel_name || ''  }}</view>
							</view>
							
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;border-bottom: 1rpx #e5e5e5 solid;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
								<view class="">
									<text>{{ record.consume_trade_no || ''  }}</text>
									<image style="width: 26rpx;height: 26rpx;" @click="copyId(record)"
										src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
										mode=""></image>
								</view>
							</view>
							<view  @click="showDetail(record)"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;color: #00aa00; ">
								<view v-if="record.deduct_num==1 && record.record_state==3">已核销<text style="color:red">已撤销
									</text></view>
								<view v-else-if="record.deduct_num==-1 && record.record_state==3">已撤销</view>
								<view v-else-if="record.deduct_num==1 && record.record_state==1">已核销</view>
							</view>
						</view>
						
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
								<view class="">
									<text>{{ record.card_name || ''  }}</text>
								</view>
							</view>
							<view  @click="showDetail(record)"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view class="">
									<text style="color: #0055ff;">{{ record.record_type_name || ''  }}</text>
								</view>
							</view>
						</view>
				
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
								<view class="">
									<text>{{ record.code_no || ''  }}</text>
									<image style="width: 26rpx;height: 26rpx;" @click="copyId1(record)"
										src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
										mode=""></image>
								</view>
							</view>
							<view  @click="showDetail(record)"
								style="display: flex;flex-direction: row; justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view class="">
									<text>-{{ record.paid || ''  }}</text>
									<text style="margin-left: 10rpx;color: #0055ff;">余:{{ record.else_money || ''  }}</text>
								</view>
							</view>
						</view>
				
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
							<view style="display: flex;flex-direction: row;align-items: center; font-size: 26rpx;"  v-if="record.user_mobile">
								<image style="width: 30rpx;height: 30rpx;border-radius: 50% 50%;" src="/static/logo.png" mode=""></image>
								<text>{{ record.username == null ? '散客': record.username }}</text>
								<!-- <view class="" style="margin-left: 10rpx;">
									<u-tag :text="record.vip_info.name" plain plainFill size="mini"></u-tag>
								</view> -->
							</view>
							<view v-if="record.outer_code != '--'"  @click="showDetail(record)"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view class="">
									<text style="margin-right: 10rpx;">手环: {{ record.outer_code || ''  }}</text>
									<text
										v-if="record.check_state==2||record.record_state==3">{{record.deposit_state || '' }}({{ record.deposit || '' }})</text>
									<text v-else style="color: red">{{record.deposit_state || '' }} ({{ record.deposit || '' }})</text>
								</view>
							</view>
						</view>
				
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10rpx;">
							<view
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx;">
								<view class="" v-if="record.user_mobile">
									<text>{{ record.user_mobile||''}}</text>
									<image style="width: 26rpx;height: 26rpx;" @click="copyId2(record)"
										src="https://sass-test.doit10019.com/upload/202504/21105351-38218363892843890.png?attname=fuzhi111.png"
										mode=""></image>
								</view>
							</view>
							<view @click="showDetail(record)"
								style="display: flex;flex-direction: row;justify-content: space-between;align-items: center; font-size: 26rpx; ">
								<view class="" style="display: flex;flex-direction: row;">
									<view style="margin-right: 10rpx;"  v-if="record.outer_code != '--'">超时费: 实际支付/{{record.over_fee || '' }}</view>
									<u-tag v-if="record.record_state==1"
										:type="record.check_state == 1 ? 'warning':'success'"
										:text="checkStateList[record.check_state]" size="mini"></u-tag>
									<u-tag type="error" size="mini" text="已撤销" ></u-tag>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	const venues = require("@/api/venues/venues.js");
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				src: "",
				listQuery: { //分页
					pageSize: 5,
					pageNo: 1,
				},
				totalPage: "",
				ordersList: [],
				total_num: '',
				total_count: '',
				venue_id: '',
				itemChooselist: {},
				records: [],
				type_self: 1,
				passlist: [],
				checkStateList: [],
				total1:'',
				total2:'',
				total3:''
			}
		},
		onLoad() {
			var data = uni.getStorageSync("wqzdy");
			var items = JSON.parse(data)
			this.venuelist = items
			// 处理itemChooselist的逻辑
			if (this.venuelist.length > 0) {
				this.itemChooselist = this.venuelist[0]
				this.venue_id = this.venuelist[0].id
			} else {
				this.itemChooselist = {}; // 或者设置为其他默认值
			}
			console.log(this.itemChooselist, 'this.itemChooselist')
		},
		onShow() {
			// this.today()
			this.conflist()
			this.today_consume_record()
			this.today_consume_record1()
			this.today_consume_record2()
		},

		methods: {
			showDetail(record) {
				uni.navigateTo({
					url: `../ticket_card/detail?selectionArr=${encodeURIComponent(JSON.stringify(record))}` 
				})
			},
			copyId(item) {
				// 获取要复制的文本内容
				let text = item.consume_trade_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			copyId1(item) {
				// 获取要复制的文本内容
				let text = item.code_no;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			copyId2(item) {
				// 获取要复制的文本内容
				let text = item.user_mobile;
				// 调用uni.setClipboardData()函数进行复制操作
				uni.setClipboardData({
					data: text.toString(), // 设置要复制的文本内容
					success(res) {
						console.log("成功复制到剪贴板");
					},
					fail(err) {
						console.error("复制失败", err);
					}
				});
			},
			async conflist() {
				let params = {};
				let res = await venues.conflist(params);
				if (res.code == 1) {
					this.weekList2 = res.data.channelList
					this.checkStateList = res.data.checkStateList
				}
			},
			async today_consume_record() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: this.type_self
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
					that.passlist = that.passlist.concat(res.data.list.data); //将数据拼接在一起
					this.totalPage = res.data.list.last_page
					this.total1 = res.data.list.total
				}
			},
			async today_consume_record1() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: 2
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
					this.total2 = res.data.list.total
				}
			},
			async today_consume_record2() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.passlist = [];
				let data = {
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					venue_id: this.venue_id,
					type: 3
				};
				let res = await venues.today_consume_record(data);
				if (res.code == 1) {
					this.total3 = res.data.list.total
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.today_consume_record()
			},
			confirm1(data) {
				this.venue_id = data
				console.log(data, 'data');
				// 直接根据接收到的 id 在 venuelist 中查找对应的场馆对象
				const selectedItem = this.venuelist.find(item => item.id === data);
				if (selectedItem) {
					// 将找到的场馆对象赋值给 itemChooselist
					this.itemChooselist = selectedItem;
				} else {
					console.log(`未找到 id 为 ${data} 的场馆对象`);
				}
				this.today()
				this.comsume_index()
			},
			offslist(type) {
				uni.navigateTo({
					url: './write_detail?type=' + type
				})
			},
			scanCode() {
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						if (res.result) {
							// 这是码
							const val = res.result;
							if (res.result != '') {
								uni.navigateTo({
									url: './detail?val=' +
										res.result + "&op=" + 2 + "&venue_id=" + this.venue_id
								})
							}
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			// 检索核销
			retrievallist() {
				uni.navigateTo({
					url: './detail?op=' + 1 + "&venue_id=" + this.venue_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mobile-write-offs {
		// background: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250731809043173.png') left top/100% auto no-repeat;
		min-height: 100vh;
		background-color: #EDF5F5;

		.section_2 {
			background-color: rgb(255, 255, 255);
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			margin-top: 10rpx;

			.box {
				height: 141rpx;
			}

			.value {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 25rpx;
			}

			.label {
				margin-top: 15rpx;
				color: rgb(136, 136, 136);
				font-size: 28rpx;
				font-weight: 500;
				line-height: 27rpx;
			}
		}

		.section_3 {
			margin-top: 20rpx;
			color: #fff;
			font-weight: bold;
			font-size: 38rpx;
			padding: 0 20rpx;

			.box {
				background-size: 100% 100%;
				background-repeat: no-repeat;
				height: 140rpx;
			}

			.box1 {
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250733283775686.png');
			}

			.box2 {
				background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61b30d246cd8030011e9dbb9/16391250734611354178.png');
			}

			.name {
				margin-left: 20rpx;
			}
		}

		.section_4 {
			margin: 20rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
		}

		.list {
			box-shadow: 0px 0px 8.36rpx 0.64rpx rgba(0, 0, 0, 0.05);
			// background-color: #fff;

			.title {
				padding: 25rpx 30rpx;
				font-size: 32rpx;
				font-weight: 700;
				// line-height: 31rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				&::before {
					content: '';
					display: inline-block;
					background-color: rgb(99, 93, 247);
					border-radius: 3rpx;
					width: 6rpx;
					height: 30rpx;
					margin-right: 15rpx;
				}
			}

			.item {
				font-size: 22rpx;
				padding: 30rpx 20rpx;
				border-bottom: solid 2rpx rgb(229, 229, 229);

				.name {
					color: rgb(136, 136, 136);
				}

				.value {
					color: rgb(99, 93, 247);
					font-size: 24rpx;
					font-weight: 700;
				}
			}
		}
	}

	/* 全局盒模型 */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* 基础布局 */
	.flex {
		display: flex;
	}

	.flex-col {
		flex-direction: column;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.items-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.gap-2 {
		gap: 16rpx;
	}

	.gap-4 {
		gap: 32rpx;
	}

	/* 容器样式 */
	.container {
		padding: 0 32rpx;
	}

	.min-h-screen {
		min-height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #EDF5F5;
		padding: 0rpx 0 50rpx 0;
		position: relative;
	}

	.pt-14 {
		padding-top: 112rpx;
	}

	.pb-20 {
		padding-bottom: 20rpx;
	}

	.pt-4 {
		padding-top: 32rpx;
	}

	.pb-6 {
		padding-bottom: 48rpx;
	}

	/* 顶部导航栏 */
	.top-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #ffffff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	/* 卡片样式 */
	.card {
		border-radius: 24rpx;
		box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.05);
		background-color: #fff;
	}

	.p-4 {
		padding: 20rpx;
	}

	.mb-4 {
		margin-bottom: 20rpx;
	}

	.hover-bg-gray-50:hover {
		background-color: #f9fafb;
	}

	/* 图片样式 */
	.venue-avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	/* 文字样式 */
	.text-lg {
		font-size: 32rpx;
	}

	.text-sm {
		font-size: 28rpx;
	}

	.text-xs {
		font-size: 24rpx;
	}

	.font-medium {
		font-weight: 500;
	}

	.text-gray-600 {
		color: #6b7280;
	}

	.text-gray-500 {
		color: #9ca3af;
	}

	/* 按钮样式 */
	.filter-btn,
	.add-btn {
		width: 80rpx;
		height: 80rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-btn {
		background-color: #409eff;
	}

	.add-btn .u-icon {
		color: #fff;
	}

	/* 列表项样式 */
	.record-card {
		border-radius: 24rpx;
		transition: all 0.2s ease;
		background-color: #fff;
		border-radius: 10rpx;
		width: 94%;
		margin-left: 3%;
		border: 2rpx #fff solid;
		display: flex;
		flex-direction: column;
	}

	.card-content {
		border-radius: inherit;
	}

	.record-header {
		margin-bottom: 16rpx;
		// padding-bottom: 16rpx;
		border-color: #e5e7eb;
	}

	.record-info {
		margin-bottom: 16rpx;
	}

	.card-no-group {
		// min-width: 360rpx;
	}

	.copy-icon {
		cursor: pointer;
	}

	/* 状态标签样式 */
	.bg-gray-100 {
		background-color: #f3f4f6;
		padding: 6rpx 12rpx;
	}

	.bg-purple-100 {
		background-color: #f5f3ff;
		padding: 6rpx 12rpx;
	}

	.bg-blue-100 {
		background-color: #ebf4ff;
		padding: 6rpx 12rpx;
	}

	.bg-red-100 {
		background-color: #ffe4e6;
		padding: 6rpx 12rpx;
	}

	.bg-green-100 {
		background-color: #e5f3eb;
		padding: 6rpx 12rpx;
	}

	/* 文本颜色定义 */
	.text-yellow-600 {
		color: #d97706;
	}

	/* 黄色 600 色值，示例值 */
	.text-green-600 {
		color: #059669;
	}

	/* 绿色 600 色值，示例值 */
	.text-red-600 {
		color: #dc2626;
	}

	/* 红色 600 色值，示例值 */
	.text-blue-600 {
		color: #1d4ed8;
	}

	/* 蓝色 600 色值，示例值 */
	.text-purple-600 {
		color: #7e22ce;
	}

	/* 紫色 600 色值，示例值 */

	.rounded {
		border-radius: 8rpx;
	}

	.px-2 {
		padding-left: 12rpx;
		padding-right: 12rpx;
	}

	.py-1 {
		padding-top: 6rpx;
		padding-bottom: 6rpx;
	}

	/* 底部标签栏 */
	.bottom-tabbar {
		height: 112rpx;
		border-top: 2rpx solid #e5e7eb;
	}

	.tab-item {
		align-items: center;
		justify-content: center;
	}

	.tab-text {
		margin-top: 4rpx;
		font-size: 20rpx;
	}

	.text-blue-500 {
		color: #409eff;
	}

	.text-gray-500 {
		color: #6c757d;
	}

	/* 响应式样式 */
	@media (min-width: 768px) {
		.container {
			padding: 0 64rpx;
		}

		.pt-14 {
			padding-top: 144rpx;
		}

		.pb-20 {
			padding-bottom: 192rpx;
		}
	}
</style>